<script setup>
import { timeFormatter } from '@/utils/timeHandlers';
import { allResourceCategory, getAllResourceCategory,handleDelete} from '@/composables/useResourceCategory';
import dayjs from  'dayjs';
import DlgResourceCategoryCreateOrEdit from './DlgResourceCategoryCreateOrEdit.vue';

getAllResourceCategory()
console.log(allResourceCategory)
const dlgCreateOrEdit = ref()
 
</script>

<template>

  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        
        <h3>资源类别列表</h3>
        <el-button class="button" type="primary" @click=" dlgCreateOrEdit?.initAndShow()">创建类别</el-button>
      </div>
    </template>
  <el-table :data="allResourceCategory" border style="width: 100%">
    <el-table-column type="index" label="序号"align="center"/>
    <el-table-column prop="name" label="类别名称" align="center" />
     <el-table-column prop="createdTime" :formatter="timeFormatter" label="创建时间" align="center" />
    <el-table-column prop="sort" label="排序" align="center"/>
    <el-table-column prop="address" label="操作"align="center" v-slot="{ row }">
      <el-button type="primary" @click="dlgCreateOrEdit?.initAndShow(row.id)">编辑</el-button>
      <el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
    </el-table-column>
    
  </el-table>
  <DlgResourceCategoryCreateOrEdit ref="dlgCreateOrEdit"/>
  </el-card>

</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size:14px;
}
.item {
    margin-bottom: 18px;
}
.box-card {
    width: auto;
}
</style>
